{extends file="../home.html"}
{block name="title"}{$head_title}{/block}

{block name="css"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/refresh_load.css?version={$version}"/>
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/recharge_pay_pop.css">
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/my_wallet.css">
<link href="__PUBLIC__/Css/front/css/zanshang_detail.css?version={$version}" type="text/css" rel="stylesheet">
<style type="text/css">
#load_wrapper{
	margin-top: 2.2rem;
	margin-bottom: 2.5rem
}
/*全屏查看器样式*/
.fullscreen{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10000;
	background-color: #000;
	display: none;
}
.fullscreen .fullscreen_slide{
	background-color: #000;
}
</style>
{/block}
{block name="content"}
	
<div class="com_header">
	<a href="javascript:;" class="go_back"><i class="icon_back"></i></a>赞赏贴<span class="louzhu">只看楼主</span>
</div>

<div id="load_wrapper">
	<div id="scroller">
		<div id="pullDown">
		    <span class="pullDownIcon"></span>
		</div>

	<div class="user_header clearfix" >
		 <a href="/Index/others_personal_center" class="avatar">
		 	<img src="/Public/Images/img/icon-hone-chou-50@3x.png" alt="">
		 </a>
		 <div class="user_main clearfix">
		 	<span class="nickname" onclick="location='/Index/others_personal_center'">花花世界</span>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 </div>
		 <p>06-15<span class="type">赞赏频道</span></p>
	</div>
	<div class="post_content">
		<div class="show_content">
			<h2>世界很美，而你刚好有空</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae unde dicta facilis porro distinctio quaerat incidunt et mollitia dolorum laborum. Beatae, possimus voluptatem a? Debitis consequuntur corporis, reprehenderit sint assumenda!</p>
			<div class="post_img">
				<img src="/Public/Images/img/Mask@3x.png" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png">
				<img src="/Public/Images/img/Mask@3x.png" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png">
				<img src="/Public/Images/img/Mask@3x.png" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png">
			</div>
		</div>
		<!-- 隐藏内容 -->
		<div class="hide_content" style="display: none;">
			<p>
				这里是隐藏内容
			</p>
			<div class="post_img">
				<img src="/Public/Images/img/Mask@3x.png" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png">
				<img src="/Public/Images/img/Mask@3x.png" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png">
			</div>		
		</div>
	</div>

	<!-- 分数 -->
	<div class="pinfen">
		<strong>8.1分</strong><span>鉴定师评价平均分</span>
	</div>

	<!-- 购买 -->
	<div class="buy">
		<h4>此处隐藏100字，2图</h4>
		<p><strong>¥1</strong>12人购买</p>
		<a href="javascript:;" class="buy_btn">购买</a>
	</div>

	<!-- 鉴定师评论 -->
	<div class="jd_comment">
		<h5 class="comment_title">鉴定师评论（2）</h5>
		<!-- 列表 -->
		<div class="jd_list">
			<div class="jd_one">
				<a href="/Index/others_personal_center"  class="avatar"><img src="/Public/Images/img/Mask@3x.png" alt=""></a>
				<div class="jd_main">
					<h3 class="name_txt">
					<span class="nickname">人间四月 </span>
					<span class="fen">评分:<strong>8.1</strong></span>
					</h3>
					<p class="time"><span>1楼</span><span>22:58</span></p>
					<p class="text">说的真好，从未见过如此好的句子。
					一身诗意千寻瀑，万古人间四月天。
					一朵花就是一个宇宙。一个人身也是一个宇宙。万物渺小或者宏大，微观世界或者宏观世界，都是一个世界。</p>
				</div>
			</div>
			<div class="jd_one">
				<a href="/Index/others_personal_center" class="avatar"><img src="/Public/Images/img/Mask@3x.png" alt=""></a>
				<div class="jd_main">
					<h3 class="name_txt">
					<span class="nickname">人间四月 </span>
					<span class="fen">评分:<strong>8.1</strong></span>
					</h3>
					<p class="time"><span>1楼</span><span>22:58</span></p>
					<p class="text">说的真好，从未见过如此好的句子。
					一身诗意千寻瀑，万古人间四月天。
					一朵花就是一个宇宙。一个人身也是一个宇宙。万物渺小或者宏大，微观世界或者宏观世界，都是一个世界。</p>
					<ul class="imgbox clearfix">
						<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
						<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="2"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
						<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="3"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
					</ul>
				</div>
			</div>

		</div>
		<!-- 无内容 -->
		<div class="no_pl">暂无鉴定师评论，快成为第一个吧～</div>
		<!-- 查看更多 -->
		<div class="see_more">
			<i class="icon_arrow"></i>查看更多
		</div>
		<!-- 我要打分 -->
		<div class="dafen">
			<a href="/Index/jiandin_df">
				我要打分
			</a>
		</div>
		<!--  已评分 -->
		<div class="dafen_yes">
			<a href="javascript:;">
				已评分
			</a>
		</div>
	</div>

	<!-- 用户评论 -->
	<div class="user_comment">
		<h5 class="comment_title">用户评论（2）</h5>
		<div class="comment_list">

			<div class="comment_item">
				<div class="comment_top">
					<a href="/Index/others_personal_center" class="avatar">
						<img src="/Public/Images/img/Mask@3x.png" alt="">
					</a>
					<div class="comment_user">
						<div class="user_info">
							<span class="nickname">天生偏执狂</span>
							<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i> 
						</div>
						<div class="other clearfix">
							<span class="floor">2楼</span>
							<span class="time">22:58</span>
							<span class="zan_num">10</span>
							<i class="icon_zan"></i>
							<i class="icon_pl"></i>
						</div>
						<div class="text">
							我还能说什么，我也很无奈啊。
						</div>
						<ul class="imgbox clearfix">
							<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
							<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="2"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
							<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="3"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
						</ul>
					</div>
				</div>
				
				<div class="comment_cont">
					<ul>
						<li><span class="nick">老奶奶都不服就服你：</span>我能怎么办，当然是选择原来他啦</li>
						<li><span class="nick">老奶奶都不服就服你：</span>我能怎么办，当然是选择原来他啦</li>
						<li><span class="nick">老奶奶都不服就服你：</span>我能怎么办，当然是选择原来他啦</li>
					</ul>
				</div>
			</div>


			<div class="comment_item">
				<div class="comment_top">
					<a href="/Index/others_personal_center" class="avatar">
						<img src="/Public/Images/img/Mask@3x.png" alt="">
						<span class="jd_tag">楼主</span>
					</a>
					<div class="comment_user">
						<div class="user_info">
							<span class="nickname">天生偏执狂</span>
							<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i> 
						</div>
						<div class="other clearfix">
							<span class="floor">2楼</span>
							<span class="time">22:58</span>
							<span class="zan_num">10</span>
							<i class="icon_zan"></i>
							<i class="icon_pl"></i>
						</div>
						<div class="show_cont">
							<div class="text">
								我还能说什么，我也很无奈啊。
							</div>
							<ul class="imgbox clearfix">
								<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
								<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="2"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
								<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="3"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
							</ul>
						</div>

						<div class="hide_cont" style="display: none;">
							<div class="text">
							我是隐藏的内容
							</div>
							<ul class="imgbox clearfix">
								<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
								<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="2"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
								<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="3"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
							</ul>
						</div>

						<div class="buy" style="margin-bottom: 0;margin-left: -3.6rem;margin-right:-0.6rem;">
							<h4>此处隐藏100字，2图</h4>
							<p><strong>¥1</strong>12人购买</p>
							<a href="javascript:;" class="buy_btn">购买</a>
						</div>
					</div>
				</div>
				
				<div class="comment_cont">
					<ul>
						<li><span class="nick">老奶奶都不服就服你：</span> 我能怎么办，当然是选择原来他啦</li>
						<li><span class="nick">老奶奶都不服就服你：</span> 我能怎么办，当然是选择原来他啦</li>
						<li><span class="nick">老奶奶都不服就服你：</span> 我能怎么办，当然是选择原来他啦</li>
						<li><span class="nick">老奶奶都不服就服你：</span> 我能怎么办，当然是选择原来他啦</li>
					</ul>
				</div>
			</div>

			

			<div class="comment_item">
				<div class="comment_top">
					<a href="/Index/others_personal_center" class="avatar">
						<img src="/Public/Images/img/Mask@3x.png" alt="">
						<span class="jd_tag">鉴定师</span>
					</a>
					<div class="comment_user">
						<div class="user_info">
							<span class="nickname">天生偏执狂</span>
							<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i> 
						</div>
						<div class="other clearfix">
							<span class="floor">2楼</span>
							<span class="time">22:58</span>
							<span class="zan_num">10</span>
							<i class="icon_zan"></i>
							<i class="icon_pl"></i>
						</div>
						<div class="text">
							我还能说什么，我也很无奈啊。
						</div>
						<div class="buy" style="margin-bottom: 0;margin-left: -3.6rem;margin-right:-0.6rem;">
							<h4>此处隐藏100字，2图</h4>
							<p><strong>¥1</strong>12人购买</p>
							<a href="javascript:;" class="buy_btn">购买</a>
						</div>
					</div>
				</div>
			</div>
				

			
			
			
		</div>
	</div>

		<div id="pullUp">
			<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载...</span>
		</div>
	</div>
</div>


<!-- 固定底部-->
<div class="fixed_footer">
	<div class="input">
		我也来说一句…
	</div>
	<i class="zan"></i>
	<i class="coll"></i>
	<i class="share"></i>
</div>


<!--支付弹窗-->
<div class="pop_back"></div>
<div class="pay_pop">
	<div class="recharge_detail">
		<span class="close_recharge"></span>
		充值详情
	</div>

	<div class="recharge_amount">
		充值金额
		<span class="amount">20元</span>
	</div>
	<div class="interval"></div>
	<div class="choose_pay">
		<div class="title">选择支付方式</div>
		<div class="pay">
			<i class="icon_pay zhifubao"></i>
			<p>支付宝支付</p>
			<span class="paymethod"><input type="radio"   name="pay_method" value="zhifubao" class="radioclass"></span>
		</div>
		<div class="pay">
			<i class="icon_pay weixin"></i>
			<p>微信支付</p>
			<span class="paymethod"><input type="radio"  name="pay_method" value="weixin" class="radioclass"></span>
		</div>
	</div>

	<input type="submit" class="confirm" value="支付">

</div>
<!--充值弹窗-->
<div class="recharge_pop">
	<div class="recharge_detail">
		<span class="close_recharge"></span>
		余额不足，需先充值
	</div>

	<div class="choose_amount">
		<p>请选择充值金额</p>
		<span class="money_box">10元</span>
		<span class="money_box">20元</span>
		<span class="money_box">50元</span>
		<span class="money_box" style="margin-right:0">100元</span>
		<span class="money_box">500元</span>
		<span class="money_box">1000元</span>
		<span class="money_box">2000元</span>
		<span class="money_box" style="margin-right:0">
			<input type="tel" placeholder="自定义金额" class="customize">
		</span>
	</div>
	<div class="balance">钱包余额<span style="color:#ff6600">1元</span></div>
	<input type="submit" class="confirm" style="top:0.7rem" value="充值">

</div>

<!-- 全屏图片查看器-->
<div class="swiper-container fullscreen" id="fullscreen">
	<div class="swiper-wrapper" id="swiper_wrapper">
	</div>
</div>
{/block}
{block name="js"}

{literal}
<script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/js/zs_detail_load.js"></script>	
<script>
	var total = 1;
    var firstRow = 1;

	$(function(){
		//只看楼主
		$('.louzhu').on('click',function(){
			$(this).toggleClass('active');
		})
		// 百分比
		$('.p2').width($('.p2').attr("data-width")+"%")
		//点赞
		$('.icon_zan').on('click',function(){
			$(this).toggleClass('hover');
			if($(this).hasClass('hover')){
				var zan_num = parseInt($(this).parent().find('.zan_num').html())+1;
				$(this).parent().find('.zan_num').html(zan_num);
			}else{
				var zan_num = parseInt($(this).parent().find('.zan_num').html())-1
				$(this).parent().find('.zan_num').html(zan_num);
			}
			
		})
		//图片正方形
		var liw = $('.imgbox li').width();
		$('.imgbox li').height(liw);


		//底部点赞和收藏
		$('.zan').on('click',function(){
			$(this).toggleClass('active');
		})
		$('.coll').on('click',function(){
			$(this).toggleClass('active');
		})
		//微信和支付宝
		$(".paymethod").on("click",function(){
	  		$(this).addClass("on");
	  		 $(this).children("input").prop("checked",true);
	  		// $(this).parents("div").siblings("div").children("input").attr("checked","false");
	  		$(this).parents("div").siblings("div").children("span").removeClass("on");
	  		
	  		var val_payPlatform = $('.choose_pay input[name="pay_method"]:checked ').val();
	  		console.log(val_payPlatform);

  		})
  		//关闭
  		$('.pay_pop .close_recharge').on('click',function(){
  			$('.pop_back').hide()
  			$('.pay_pop').hide()
  		})
  		$('.recharge_pop .close_recharge').on('click',function(){
  			$('.pop_back').hide()
  			$('.recharge_pop').hide()
  		})
  		//购买
  		$('.buy_btn').on('click',function(){
  			$('.pop_back').show()
  			$('.pay_pop').show()
  		})

  		//支付
  		// $('.confirm').on('click',function(){
  		// 	// $('.pop_back').hide()
  		// 	$('.recharge_pop').show()

  		// })
  		//图片查看器
		$(function(){
			$(document).on('click', '.post_img img', function(event){
				event.preventDefault();
				var row = $(this).data('row');
				var img_urls = [];

				$(this).parent().find('img').each(function() {        
				    img_urls.push($(this).data("img"));
				});
				var html = '';
				for(i=0;i<img_urls.length;i++){
					html += '<div class="swiper-slide fullscreen_slide"><img src="'+img_urls[i]+'"/></div>';
				}
				$('#swiper_wrapper').empty().append(html);
				console.log(img_urls);
				$('#fullscreen').show();
				var full_swiper = new Swiper('.fullscreen',{
				    //pagination : '.full_pagination',
				});
				full_swiper.slideTo(row, 0, false);
				
			});
			// 关闭查看器
			$('#fullscreen').on('click', function(event) {
				event.preventDefault();
				$(this).hide();
			});
		})
		//图片查看器2
		$(function(){
			$(document).on('click', '.img', function(event){
				event.preventDefault();
				var row = $(this).data('row');
				var img_urls = [];
				console.log($(this).parent().parent())
				$(this).parent().parent().find('.img').each(function() {        
				    img_urls.push($(this).data("img"));
				});
				var html = '';
				for(i=0;i<img_urls.length;i++){
					html += '<div class="swiper-slide fullscreen_slide"><img src="'+img_urls[i]+'"/></div>';
				}
				$('#swiper_wrapper').empty().append(html);
				console.log(img_urls);
				$('#fullscreen').show();
				var full_swiper = new Swiper('.fullscreen',{
				    //pagination : '.full_pagination',
				});
				full_swiper.slideTo(row, 0, false);
				
			});
			// 关闭查看器
			$('#fullscreen').on('click', function(event) {
				event.preventDefault();
				$(this).hide();
			});
		})


	})
</script>
{/literal}
{/block}